import './index.scss';
import DetailsBanner from './DetailsBanner';
import useFetch from '../../hooks/useFetch';
import { useParams } from 'react-router-dom';
import Cast from './Cast';
import VideosSection from './VideoSection';
import Similar from './Carousels/Similar';
import Recommendation from './Carousels/Recommendation';

const Details: React.FC = () => {
  const { mediaType, id } = useParams();
  const { data, loading } = useFetch(`/${mediaType}/${id}/videos`);
  const { data: credits, loading: creditsLoading } = useFetch(`/${mediaType}/${id}/credits`);

  return (
    <div className="details">
      <DetailsBanner video={data?.results?.[0]} crew={credits?.crew}></DetailsBanner>
      <Cast data={credits?.cast} loading={creditsLoading}></Cast>
      <VideosSection data={data} loading={loading}></VideosSection>
      <Similar mediaType={mediaType} id={id}></Similar>
      <Recommendation mediaType={mediaType} id={id}></Recommendation>
    </div>
  );
};

export default Details;
